import { PureComponent } from 'react'
import Banner from './Banner'
import Main from './Main'
import Tags from './Tags'
import { getTags } from '../../actions/articles'
import { connect } from 'react-redux'

class Home extends PureComponent {

  render() {
    // console.log(this.props)
    return (
      <div className="home-page">
        {/* 上 ：广告 ：bannber */}
        <Banner />

        {/* 下  ： 左 选项卡 文章列表  ，右侧 标签
           */}
        <div className="container page">
          <div className="row">
            <Main />
            {/* 标签 */}
            <div className="col-md-3">
              <div className="sidebar">
                <p>热门标签</p>
                <Tags tags={this.props.tags} />
              </div>
            </div>
          </div>
        </div>

      </div>
    )
  }

  componentDidMount() {
    this.props.getTags()
  }
}

const mapState = state => ({
  ...state.articles
})

const mapDispatch = dispatch => ({
  getTags: () => dispatch(getTags())
})


export default connect(mapState, mapDispatch)(Home)